<template>
  <mars-dialog v-bind="vueAttrs" :nopadding="true" title="属性编辑" width="330" top="60" bottom="40" left="10"
    :minWidth="200">
    <div class="attr-editor-main">
      <a-tabs v-model:activeKey="activeTab" centered :tabBarGutter="25" type="card" tabPosition="top"
        @change="tabChange">
        <a-tab-pane key="attr" tab="属性">
          <mars-attrs v-if="activeTab === 'attr'" :attrs="attrs" @attrChange="attrChange" />
        </a-tab-pane>
        <a-tab-pane
          v-if="positionType === 'static' || (positionType === 'time' && graphicType === 'fixedRoute')"
          key="coord"
          tab="坐标">
          <mars-positions
            v-if="activeTab === 'coord'"
            :positionType="positionType"
            :lonlats="lonlats"
            :minNum="minNum"
            :maxNum="maxNum"
            @pointChange="pointChange" />
        </a-tab-pane>
        <a-tab-pane key="style" tab="样式">
          <template v-if="activeTab === 'style' && graphicType">
            <template v-if="!styleParArr.length">
              <mars-styles v-model:style="style" :customType="customType" :graphicType="graphicType"
                @styleChange="styleChange" />
            </template>

            <template v-else>
              <mars-styles :graphicType="graphicType" v-model:style="style" isParent @styleChange="styleChange" />
              <template v-for="(item, index) in styleParArr" :key="index">
                <div v-if="typeof item === 'string'">
                  <mars-styles :graphicType="item" :parentType="graphicType" v-model:style="style[item]"
                    @styleChange="styleChange" />
                </div>
              </template>
            </template>
          </template>
        </a-tab-pane>
        <a-tab-pane key="baseInfo" tab="基础">
          <mars-baseinfo v-if="activeTab === 'baseInfo'" v-model:data="graphicOptions" @base-change="baseChange" />
        </a-tab-pane>
      </a-tabs>
    </div>

    <div class="tools">
      <ul class="tools-pannel">
        <li class="tools-edit_icon">
          <mars-icon icon="focus-one" width="18" @click="flyToGraphic" color="rgba(234, 242, 255, 0.7)"
            title="飞行定位"></mars-icon>
        </li>
        <li class="tools-edit_icon">
          <mars-icon icon="delete" width="18" @click="deleteEntity" color="rgba(234, 242, 255, 0.7)"
            title="删除"></mars-icon>
        </li>
        <li class="tools-edit_icon">
          <mars-icon icon="inbox-download-r" width="18" @click="getGeoJson" color="rgba(234, 242, 255, 0.7)"
            title="导出geojson"></mars-icon>
        </li>
      </ul>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, toRaw, useAttrs, nextTick } from "vue"
import MarsStyles from "./mars-styles.vue"
import MarsPositions from "./mars-positions.vue"
import MarsAttrs from "./mars-attrs.vue"
import MarsBaseinfo from "./mars-baseinfo.vue"
import * as mapWork from "./map"
import localforage from "localforage"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import { useWidget } from "@mars/common/store/widget"
import { aloneTypeStyle } from "@mars/utils/mars-util"

const { currentWidget } = useWidget()
const vueAttrs = useAttrs()

const activeTab = ref("style") // 卡片所处位置

const tabChange = (item: any) => {
  localforage.setItem("active-tab", item)
}
const customType = ref("")
const graphicType = ref("")

const positionType = ref("static")
const lonlats = ref(null)
const minNum = ref(null)
const maxNum = ref(null)

const style = ref(null)
// 多个类型作为参数设置的矢量,如fixedRoute
const styleParArr = ref<string[]>([])

const attrs = ref(null)
const graphicOptions = ref(null)


// 启用map.ts生命周期
useLifecycle(mapWork)

onMounted(() => {
  initGraphicItem(currentWidget.data.layerId, currentWidget.data.graphicId)
})

// 监听改变坐标位置
currentWidget.onUpdate((event) => {
  if (event.graphicId) {
    graphicType.value = null
    nextTick(() => {
      initGraphicItem(event.layerId, event.graphicId)
    })
  }
})

let graphicData: any
// 监听到矢量数据发生变化
function initGraphicItem(layerId: string | number, graphicId: string | number) {
  graphicData = mapWork.getGraphicOptions(layerId, graphicId)
  if (!graphicData) {
    return
  }
  graphicOptions.value = graphicData
  // =====style===========
  style.value = graphicData.style ?? {}

  const paraArr = aloneTypeStyle[graphicData.type]
  if (paraArr && paraArr.length) {
    styleParArr.value = paraArr
    paraArr.forEach((typeItem) => {
      const typeData = graphicData[typeItem]

      if (typeof typeItem !== "string" && typeItem.length) {
        typeItem.forEach((item) => {
          style.value[item] = graphicData[item]
        })
      } else if (typeData) {
        style.value[typeItem] = { ...typeData }
      }
    })
  }

  // =====坐标===========
  minNum.value = graphicData.minPointNum
  maxNum.value = graphicData.maxPointNum

  positionType.value = graphicData.positionType
  if (graphicData.positionType === "static") {
    lonlats.value = graphicData.isPoint ? [graphicData.position] : graphicData.positions
  } else if (graphicData.positionType === "time" && graphicData.type === "fixedRoute") {
    lonlats.value = graphicData.position?.list ?? []
  } else {
    lonlats.value = []
  }

  // =====其他参数===========
  graphicType.value = graphicData.type
  customType.value = currentWidget.data.styleType || graphicData.styleType
  attrs.value = { ...(graphicData.attr ?? {}) }
}

// 样式修改
function styleChange(newStyle: any) {
  if (styleParArr.value?.length) {
    mapWork.setGraphicOptions({ ...newStyle })
    return
  }
  mapWork.setGraphicOptions({ style: { ...newStyle } })
}

// 坐标修改
function pointChange(points: any[]) {
  const value = toRaw(points)

  if (positionType.value === "time") {
    const position = graphicOptions.value.position
    mapWork.setGraphicOptions({ position: { ...position, list: value } })
  } else if (graphicData.isPoint) {
    mapWork.setGraphicOptions({ position: value[0] })
  } else {
    mapWork.setGraphicOptions({ positions: value })
  }
  lonlats.value = value
}

// 属性修改
function attrChange(item: any) {
  const obj = { [item.name]: toRaw(item.value) }
  mapWork.setGraphicOptions({ attr: obj })

  attrs.value = { ...attrs.value, ...obj }
}

// 基础信息修改
function baseChange(obj: any) {
  mapWork.setGraphicOptions({ ...obj })

  graphicOptions.value = { ...graphicOptions.value, ...obj }
}

// *********************  删除定位保存文件方法  ******************* //
function getGeoJson() {
  const json = mapWork.graphic.toJSON() // 文件处理
  mapWork.downloadFile("标绘item.json", JSON.stringify(json))
}

function flyToGraphic() {
  mapWork.graphic.flyTo() // 事件处理
}

function deleteEntity() {
  mapWork.graphic.remove() // 删除
}
</script>
<style lang="less">
.attr-editor-main {
  height: 100%;
  overflow-y: auto;

  * {
    font-size: 14px;
    color: #ffffff;
  }

  .ant-tabs {
    height: 100%;

    .ant-tabs-nav {
      margin: 0;
      background: #3a404f;

      &::before {
        border: none !important;
      }

      .ant-tabs-nav-wrap {
        .ant-tabs-nav-list {
          .ant-tabs-tab {
            border: none;
            border-bottom: 2px solid rgba(0, 0, 0, 0);
            color: var(--mars-text-color);
            background: none !important;
          }

          .ant-tabs-tab-active {
            border-bottom: 2px solid #3385ff;
          }
        }
      }
    }

    .ant-tabs-content-holder {
      height: calc(100% - 30px);
      overflow: auto;
    }
  }

}

.tools {
  position: absolute;
  right: -33px;
  top: 30px;
  animation: fadeIn 1.5s ease-in-out forwards;
  box-sizing: border-box;
  z-index: 999 !important;
  border-radius: 4px 0px 0px 4px;
  background-color: var(--mars-dropdown-bg);
  box-shadow: var(--mars-base-shadow);
  padding: 1px;
  background: var(--mars-base-border);
  backdrop-filter: blur(10px);
  margin-top: 10px;

  .tools-pannel {
    display: flex;
    flex-direction: column;
    width: 32px;
    height: 111px;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    background: rgba(39, 44, 54, 0.8);
    border-radius: 0px 4px 4px 0px;

    .tools-edit_icon {
      cursor: pointer;
      width: 100%;
      height: 37px;
      line-height: 37px;
      text-align: center;

      &:hover {
        background: rgba(51, 133, 255, 0.8);
      }
    }
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
